<template>
	<view>
		
		<!-- 注意子组件传入的值需要@tabTap监听事件 -->
		<view class="white-bj">
			<swiper-tab-hear :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap" scrollWidth="width:50%"></swiper-tab-hear>
		</view>
		<view class="black50-zt font-26 mar-top40 center">感谢您鼓励我们前行</view>
		<view class="center mar-top20 white-bj border-r-20 overflow-hidden pad-30 box-sizing">
			<textarea v-model="formData.content" placeholder="请描述您的问题或建议" placeholder-class="pl" class="font-24 black20-zt"></textarea>
		</view>
		<!-- 手机号 -->
		<view class="box-sizing center white-bj pad-30 a-center mar-top20 border-r-20">
			<view class="font-26 black20-zt">联系方式：</view>
			<view>
				<input v-model="formData.tel" placeholder="请填写手机号" placeholder-class="pl" class="font-24 black20-zt"/>
			</view>
		</view>
		<!-- 多图上传 -->
		<view class="box-sizing center border-r-20">
			<uploud-images @uploud="uploud"></uploud-images>
		</view>
		<!-- 保存按钮 -->
		<view class="center border-r main-bj white-zt font-30 text-center line-h90  position-fixed btn_bottom" @tap="btnOk">提交</view>
	</view>
</template>

<script>
	import swiperTabHear from "@/pagesC/pages_com/swiper-tab-hear.vue";
	import uploudImages from "@/pagesC/pages_com/uploud-images.vue"
	export default {
		components:{
			swiperTabHear,
			uploudImages
		},
		data() {
			return {
				tabIndex:0,
				user_id:undefined,
				tabBars: [
					{name: '意见反馈', id: 0,type:'order'},
					{name: '反馈记录',id: 1,type:'fuwu'}, 
				],
				formData:{
					content:"",
					tel:""
				},
				imageList:[]
			}
		},
		onLoad() {
			this.user_id=parseFloat(this.$user.state.userId)
		},
		methods: {
			//点击提交
			async btnOk(){
				if(this.$user.state.token==""){
					uni.showToast({
						icon:'none',
						title:'登入超时！正在重新登入！',
						duration:2000
					})
					setTimeout(function(){
						login.Login()
					},1000)
					return
				}
				if(this.formData.content==""){
					uni.showToast({
						icon:"none",
						title:"内容不能未空！",
						duration:2000
					})
					return
				}
				if(this.formData.tel==""){
					uni.showToast({
						icon:"none",
						title:"手机号不能未空！",
						duration:2000
					})
					return
				}
				const one={
					aid:1,
					mid:this.user_id,
					content:this.formData.content,
					tel:this.formData.tel,
					pics:this.imageList.toString(',')
				}
				await this.$api.AddOpinion(one).then(res=>{
					if(res.code==0){
						uni.showToast({
							icon:"success",
							title:"提交成功！",
							duration:2000
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			},
			//多图上传
			uploud(arr){
				this.imageList=arr
				console.log(this.imageList)
			},
			//tabbar点击切换事件
			tabTap(index,type){
				if(type=='order'){
				}else if(type=="fuwu"){
					uni.redirectTo({
						url:'/pagesC/opinion/opinionList?index=1'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.pl{
		font-size: 24rpx;
		color: #999999;
	}
	.btn_bottom{
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
